<template>
  <div class="step-1 step-wrap">
    <div class="step-content">
      <p class="step-title">情景植入</p>
      <div class="step-text">
        <div class="scene-title scene-hidden">
          <a-popover
            transitionName=""
            v-for="(word, i) in renderHtml"
            :key="word + i"
            :destroyTooltipOnHide="true"
            overlayClassName="lookup-popover"
            placement="bottom"
            trigger="click"
          >
            <span @click="checkWord(word)">{{ word }}</span>
            <div slot="content">
              <div class="lookup-content">
                <div class="title">
                  {{ translate.word || translate.word }}
                  <img
                    v-show="translate.word"
                    class="icon-img"
                    @click.stop="translateVoice"
                    src="@/assets/reverse/audio-play1.png"
                    alt=""
                  />
                </div>
                <div class="translate">
                  {{ translate.translation || "未找到该生词" }}
                </div>
                <div class="btn-group">
<!--                  <a :disabled="!translate.prototype_word" @click.stop="addWord"-->
<!--                    ><img-->
<!--                      class="icon-img"-->
<!--                      src="@/assets/reverse/add1.png"-->
<!--                      alt=""-->
<!--                    />添加生词</a-->
<!--                  >-->
<!--                  <a @click="translateDetail"-->
<!--                    ><img-->
<!--                      class="icon-img"-->
<!--                      src="@/assets/reverse/detail1.png"-->
<!--                      alt=""-->
<!--                    />单词详解</a-->
<!--                  >-->
                </div>
              </div>
            </div>
          </a-popover>
        </div>
        <p class="scene-translation">{{ data.translation }}</p>
      </div>
<!--      <div-->
<!--        class="play-btn"-->
<!--        @click="goCheck"-->
<!--        v-if="+data.pass !== 0 || +data.source !== 0"-->
<!--      >-->
<!--        <span style="text-align: center;" class="scene-check">-->
<!--          检测-->
<!--        </span>-->
<!--      </div>-->
    </div>
    <div class="step1-bottom step-bottom">
      <span>理解要点</span
      ><img
        @click="changeTab('next')"
        src="@/assets/reverse/right-arrow-round.png"
        alt=""
      />
    </div>
  </div>
</template>

<script>
import { Popover } from "ant-design-vue";
// import { checkWord, addWord } from "@/services/reverse";
// import { SUCCESS_CODE } from "@/utils/const";
import { mapMutations } from "vuex";
import {checkWord} from "@/api/reverse";
export default {
  components: {
    APopover: Popover,
  },
  data() {
    return {
      data: {},
      translate: {},
    };
  },
  props: {
    renderData: {
      type: Object,
    },
    tabKey: {
      type: Number,
    },
    sentenceCurrent: {
      type: Object,
    },
  },
  computed: {
    renderHtml: function() {
      console.log(this.data)
      return this.data.word.split(" ");
    },
  },
  watch: {
    renderData: {
      handler: function(val) {
        this.data = val.list.find((v) => v.id === this.sentenceCurrent.id);
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    ...mapMutations(["setTranslateModal"]),
    replaceText(word) {
      const pattern = /[^a-zA-Z']/g;
      return word.replace(pattern, "");
    },
    checkWord(value) {
      checkWord({ word: this.replaceText(value) }).then((res) => {
        this.translate = res.data;
      });
    },
    addWord() {
      addWord({
        prototype_word: this.translate.prototype_word,
        select_word: this.translate.select_word,
        question_type: 3,
        is_diff: "0",
      }).then((res) => {
        if (res.code === SUCCESS_CODE) {
          this.$message.success("添加生词成功");
        }
      });
    },
    translateVoice() {
      let audio = document.getElementById("reverse-audio");
      audio.src = this.translate.voiceUrl;
      audio.play();
    },
    translateDetail() {
      this.setTranslateModal({
        visible: true,
        word: this.translate.select_word,
      });
      document.getElementById("app").click();
    },
    changeTab(cmd) {
      this.$emit("changeTab", cmd);
    },
    goCheck() {
      this.$router.push({
        path: "/reverse/studyed",
      });
    },
  },
  created() {},
  mounted() {
    console.log(this.data);
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
@import url("step.css");
</style>
